<template>
	<view :class="isActive == '1'?'head black':'head'">
		<view class="nav"><a :class="isActive == '0'?'nav_active':''" href="#" @click.prevent="goTo(0)"><text class="h">H</text>ome</a></view>
		<view class="nav"><a :class="isActive == '1'?'nav_active':''" href="#" @click.prevent="goTo(1)">Product</a></view>
		<view class="nav"><a :class="isActive == '2'?'nav_active':''" href="#" @click.prevent="goTo(2)">About</a></view>
	</view>
</template>

<script>
	export default {
		name:"pagehead",
		props:{
			isActive:{
				type:Number,
				default: 0
			}
		},
		data() {
			return {
				//active:this.isActive
			};
		},
		watch:{
			isActive(newVal) {
				
			}
		},
		methods:{
			goTo(num){
				if(num === 0){
					uni.navigateTo({
						url:"../../pages/index/index"
					})
				}else if(num === 1){
					uni.navigateTo({
						url:"../../pages/content/content"
					})
				}else if(num === 2){
					uni.navigateTo({
						url:"../../pages/about/about"
					})
				}
			}
		}
	}
</script>

<style scoped lang="less">
.head{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding:20px 40px;
	background-color: #444444;
	a{
		text-decoration: none;
		&:link{
			color: white;
		}
		&:visited{
			color: white;
		}
		&:hover{
			color: white;
		}
		&:active{
			color: white;
		}
		.h{
			color: #ff0000;
			font-weight: 600;
		}
	}
	.nav_active{
		text-decoration: underline;
		text-decoration: underline;
	}
}
.black{
	a{
		text-decoration: none;
		&:link{
			color: white;
		}
		&:visited{
			color: white;
		}
		&:hover{
			color: white;
		}
		&:active{
			color: white;
		}
	}
}
</style>